import React, { memo } from 'react'
import { useHistory } from 'react-router-dom'
import NumIcon from '@/baseUI/numIcon'
import { Header } from './DetailHeader.style'
import { useDispatch, useSelector } from 'react-redux'
import { setPath } from '@/pages/home/store/actionCreators'

function DetailHeader() {
    const history=useHistory()
    const Count=useSelector(state=>state.shoppingCart.shoppingCartCount)
    const dispatch=useDispatch()
    const gotoHome=()=>{
        history.push('/home')
        dispatch(setPath('/home'))
    }
    const gotoSrarch=()=>{
        history.push('/search')
        dispatch(setPath('/search'))
    }
    const gotoShoppingCart=()=>{
        history.push('/shoppingCart')
        dispatch(setPath('/shoppingCart'))
    }
    return (
        <Header>
            <i className="iconfont icon-home home" onClick={gotoHome}></i>
            <div className="title">xx购物</div>
            <div>
                <i className="iconfont icon-search search" onClick={gotoSrarch}></i>
                <i className="iconfont icon-gouwucheman" onClick={gotoShoppingCart}><NumIcon display={Count>0?true:false} top="-0.3rem" left="1.2rem" num={Count} /></i>
            </div>
        </Header>
    )
}

export default memo(DetailHeader)
